<script setup lang="ts">
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Key,
    Setting,
} from '@element-plus/icons-vue'
const isCollapse = ref(false)
// const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
</script>

<template>
    <el-aside class="aside_content">
        <div class="logo">
            <img src="../../assets/images/Logo.png" />
            <h2>
                <a href="#">VVEPAdmin</a>
            </h2>
        </div>
        <el-menu default-active='1-1' :default-openeds="['1']" class="el-menu-container" :collapse=isCollapse>
            <el-scrollbar max-height="100%">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><icon-menu /></el-icon>
                        <span>Dashboard</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">分析页</el-menu-item>
                        <el-menu-item index="1-2">工作台</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Key />
                        </el-icon>
                        <span>权限管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">基于前端权限</el-menu-item>
                        <el-menu-item index="2-2">基于后端权限</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>个人页面</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1">个人中心</el-menu-item>
                        <el-menu-item index="3-2">个人设置</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">用户管理</el-menu-item>
                        <el-menu-item index="4-2">修改密码</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <Key />
                        </el-icon>
                        <span>关于</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">项目信息</el-menu-item>
                        <el-menu-item index="5-2">联系方式</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-scrollbar>
        </el-menu>
    </el-aside>

</template>

<style lang="scss" scoped>
.aside_content {
    width: 13.5%; // 默认宽度300px
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10%;
        line-height: 64px;
        overflow: hidden;
        white-space: nowrap;
        background-color: aliceblue;

        img {
            width: auto;
            height: 55%;
        }

        h2 a {
            text-decoration: none;
            color: rgb(168, 165, 165);
        }

        h2 a:hover {
            color: skyblue;
        }
    }

    .el-menu-container {
        width: auto;
        height: 90%;
    }
}
</style>
